function createInvoker(fn:Function) {
  const eventHandler = (ev:Event)=>{
    
  }
  return eventHandler
} 

const patchUtils = {
  class(el:HTMLElement, newValue:string) {
    el.className = newValue ?? ''
  },

  style(el:HTMLElement, oldVal:any, newVal:any) {
    if(!newVal) {
      el.removeAttribute('style')
    } else {
      for(const name in oldVal) {

      }
    }
  },

  attr(el:HTMLElement, key:string, newVal:any) {
    if(!newVal) el.removeAttribute(key)
    else {
      el.setAttribute(key, newVal)
    }
  },

  event(el:HTMLElement, type:string, handler?:()=>void) {
    const invokers = el._ev || (el._ev = {})
    const prevHandler = invokers[type]

    if(prevHandler && handler) {
      invokers[type] = handler
    } else {
      if(handler) {
        const invoker = invokers[type] = createInvoker(handler)
        el.addEventListener(type, invoker, false)
      } else {
        el.removeEventListener(type, prevHandler)
        delete invokers[type]
      }
    }
    
  }
}

export function patchProps(el:HTMLElement, prop:string, newValue:unknown) {
  const oldValue = el.getAttribute(prop)

  switch(prop) {
    case 'class':
      patchUtils['class'](el, newValue as string)
      break
    case 'style':
      patchUtils['style'](el, oldValue, newValue)
      break   
    default:
      if(prop.startsWith('on')) {
        const eventType = prop.slice(2).toLowerCase()
        patchUtils['event'](el, eventType, newValue as ()=>void)
      } else {
        patchUtils['attr'](el, prop, newValue)
      }
  }
  
}
